<template>
  <div class="pretest_con">
    <div class="con_info">
      <img
        class="info_img"
        src="../../assets/image/pretest/portrait.png"
        alt=""
      />
      <div class="info_tips show_tips">
        {{pretestInfo}}
      </div>
    </div>
    <!-- <div class="con_info" v-if="$store.state.pretestType === 2">
      <img class="info_img" src="../../assets/image/pretest/portrait.png" alt="">
      <div class="info_tips show_tips" >下面是阅读广度测试，请认真阅读屏幕中的句子并记 住加点字哦，1分钟后自动消除进入答题！</div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    pretestInfo: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.pretest_con {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .con_info {
    margin-top: 1.8rem;
    display: flex;
    justify-content: center;
    height: 0.75rem;

    .info_img {
      margin-right: 0.18rem;
      width: 0.75rem;
    }

    .info_tips {
      padding: 0.25rem 0.3rem;
      margin: auto 0;
      width: 5.93rem;
      line-height: 0.32rem;
      font-size: 0.21rem;
      color: #455eae;
      background: #e4f1ff;
      border-radius: 0.3rem;
      text-align: left;
    }
  }
}

.show_tips {
  animation: animationTips 1.2s;
}

@keyframes animationTips {
  0% {
    margin-top: 0.8rem;
    opacity: 0;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}
</style>
